<template>
    <el-dialog title="地区选择" :visible.sync="dialogVisible" :close-on-click-modal="false" class="da">
        <div class="checkall-box">
            <el-checkbox v-model="checked" @change="setAreaAll">全选</el-checkbox>
            <!-- <label class="input-checkbox" >
                <input type="checkbox"/> -->
                <!-- <input type="checkbox"  v-model="itemsCheck" @change="(e) => setValue(e.target.checked, scope.row)"/> -->
                <!-- <span></span> -->
            <!-- </label> -->
        </div>
        <div class="check-box" v-if="province.length">
            <dl v-for="(item, index) in province" :key="index" class="check-wrapper">
                <dt class="check-item-all">
                    <el-checkbox v-model="item.checked" :disabled="item.choseForbidden" @change="setAreaLine(item)">{{item.areaName}}</el-checkbox>
                </dt>
                <dd class="check-item-wrapper" :class="{'nobor': index === (province.length-1) }">
                    <div v-for="(sitem, sindex) in item.children" :key="sindex" class="checkbox-item">
                        <el-checkbox v-model="sitem.checked" :disabled="sitem.choseForbidden" @change="setAreaSinge(item)">{{sitem.name}}</el-checkbox>
                    </div>
                </dd>
            </dl>
            <span class="line"></span>
        </div>
        <div style="margin-top: 10px">
          <el-table style="margin-top: 10px"
            :data="tableList"
            :header-cell-style="{background: '#eee'}"
            border
            highlight-current-row
          >
            <template v-if="config.calcuType===1">
              <el-table-column align="center" label="首重(kg)" prop="weightFirst" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.startUnit"
                            @keyup.native="floatRule(scope.row.startUnit, 'startUnit', scope.$index)"
                            @blur="floatFixed(scope.row.startUnit, 'startUnit', scope.$index, 1)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="首重运费(元)" prop="weightFirstPrice" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price"
                            @keyup.native="floatRule(scope.row.price, 'price', scope.$index)"
                            @blur="floatFixed(scope.row.price, 'price', scope.$index)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="续重(kg)" prop="weightContinue" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.continuedUnit"
                            @keyup.native="floatRule(scope.row.continuedUnit, 'continuedUnit', scope.$index)"
                            @blur="floatFixed(scope.row.continuedUnit, 'continuedUnit', scope.$index, 1)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="续重运费(元)" prop="weightContinuePrice" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.continuedPrice"
                            @keyup.native="floatRule(scope.row.continuedPrice, 'continuedPrice', scope.$index)"
                            @blur="floatFixed(scope.row.continuedPrice, 'continuedPrice', scope.$index)"
                  ></el-input>
                </template>
              </el-table-column>
            </template>
            <!--计件-->
            <template v-if="config.calcuType===3">
              <el-table-column align="center" label="件数区间" prop="weightFirst" min-width="220px" v-if="config.feeType===2">
                <template slot-scope="scope">
                  <el-row>
                    <el-col :span="11">
                      <el-input v-model="scope.row.intervalStart" disabled></el-input>
                    </el-col>
                    <el-col :span="2">
                      <span style="vertical-align: sub;">-</span>
                    </el-col>
                    <el-col :span="11">
                      <el-input v-model="scope.row.intervalEnd" @keyup.native="changeStartValue(scope.row.intervalEnd, 'intervalStart', scope.$index)"></el-input>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column align="center" label="首件件数" prop="countFirst" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.startUnit" @keyup.native="initRule(scope.row.startUnit, 'startUnit', scope.$index, 1)"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="首件运费(元)" prop="countFirstPrice" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price"
                            @keyup.native="floatRule(scope.row.price, 'price', scope.$index)"
                            @blur="floatFixed(scope.row.price, 'price', scope.$index)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="续件件数" prop="countContinue" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.continuedUnit" @keyup.native="initRule(scope.row.continuedUnit, 'continuedUnit', scope.$index, 1)"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="续件运费(元)" prop="countContinuePrice" min-width="110px">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.continuedPrice"
                            @keyup.native="floatRule(scope.row.continuedPrice, 'continuedPrice', scope.$index)"
                            @blur="floatFixed(scope.row.continuedPrice, 'continuedPrice', scope.$index)"
                  ></el-input>
                </template>
              </el-table-column>
            </template>
            <el-table-column align="center" label="操作" prop="weightFirst" width="110px" v-if="config.calcuType===3&&config.feeType===2">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="addItem()" v-if="scope.$index===0">添加</el-button>
                <el-button type="primary" size="mini" @click="delItem(scope.$index)" v-else>移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
         <div slot="footer" class="dialog-footer" @click.stop="()=>{}">
                <el-button type="primary" :loading="btnLoading" @click="choose">确定</el-button>
                <el-button @click="close">取消</el-button>
            </div>
    </el-dialog>
</template>
<script>
  export default {
    name: 'area-package',
    props: {
      config: { type: Object, default(){ return {} } },
      selected: { type: Array, default(){ return [] } },
      unChose: {type: Array, default() {return []}}
    },
    data(){
      return {
        btnLoading: false,
        dialogVisible: true,
        checked: false,
        tableList: [],
        province: [
            {
                areaName: '华东',
                checked: false,
                children: [
                    {
                        name: '上海',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '江苏',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '浙江',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '安徽',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '江西',
                        value: '0000',
                        checked: false
                    }
                ]
            },
            {
                areaName: '华南',
                children: [
                    {
                        name: '福建',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '广东',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '广西',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '海南',
                        value: '0000',
                        checked: false
                    }
                ]
            },
            {
                areaName: '华中',
                children: [
                    {
                        name: '河南',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '湖北',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '湖南',
                        value: '0000',
                        checked: false
                    }
                ]
            },
            {
                areaName: '华北',
                children: [
                    {
                        name: '北京',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '天津',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '河北',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '山西',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '内蒙古',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '山东',
                        value: '0000',
                        checked: false
                    }
                ]
            },
            {
                areaName: '东北',
                children: [
                    {
                        name: '辽宁',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '吉林',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '黑龙江',
                        value: '0000',
                        checked: false
                    }
                ]
            },
            {
                areaName: '西北',
                children: [
                    {
                        name: '陕西',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '甘肃',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '宁夏',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '青海',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '新疆',
                        value: '0000',
                        checked: false
                    }
                ]
            },
            {
                areaName: '西南',
                children: [
                    {
                        name: '重庆',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '四川',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '贵州',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '云南',
                        value: '0000',
                        checked: false
                    },
                    {
                        name: '西藏',
                        value: '0000',
                        checked: false
                    }
                ]
            }
        ]
      }
    },
    created(){
      this.tableList = this.config.tableList
      this.getList()
    },
    methods: {
      changeStartValue(value, key, index) {
        value = value.replace(/[^\d]/g, '')
        this.tableList[index+1][key] = Number(value) + 1
      },
      initRule(value, key, index, must) {
        if(typeof value !== 'string') {
          value = JSON.stringify(value)
        }
        value = value.replace(/[^\d]/g, '').replace(/^0{1,}/g, '')
        if (must && value*1 === 0) {
          value = '1'
        }
        this.tableList[index][key] = value
      },
      floatFixed(value, key, index, must) {
        value = Number(value).toFixed(2)
        if (must && value*1 === 0) {
          value = '1.00'
        }
        this.tableList[index][key] = value
      },
      floatRule(value, key, index) {
        if(typeof value !== 'string') {
          value = JSON.stringify(value)
        }
        value = value.replace(/[^\d\.]/g, '')
        this.tableList[index][key] = value
      },
      // 增加区间件数
      addItem (index) {
        let len = this.tableList.length
        let data = this.tableList[len - 1]
        if (!data.intervalEnd) {
          this.$message.error('请先输入件数区间')
          return
        }
        this.tableList.push({
          intervalStart: Number(data.intervalEnd) + 1,
          intervalEnd: null,
          startUnit: 1,
          price: 0.00,
          continuedUnit: 1,
          continuedPrice: 0.00
        })
      },
      // 删除区间件数
      delItem (index) {
        let len = this.tableList.length
        this.tableList.splice(index, 1)
        for (let i = 0; i < this.tableList.length; i++) {
          if (i >= index) {
            this.tableList[i].intervalStart = Number(this.tableList[i-1].intervalEnd) + 1
          }
        }
        
      },
        // 选择全选的
        setAreaAll() {
            this.province.map(item => {
                item.checked = this.checked
                item.children.map(sitem => {
                  if(!sitem.choseForbidden) {
                    sitem.checked = this.checked
                  }
                    return sitem
                })
                return item
            })
        },
        // 选择单行
        setAreaLine(item) {
            let flag = false
            if (item.checked) {
                flag = true
            }
            item.children.map(sitem => {
              if(!sitem.choseForbidden) {
                sitem.checked = flag
              }
                return sitem
            })
            this.isAllChecked()
        },
        // 点击单个地区
        setAreaSinge(item) {
            let num = 0
            item.children.forEach(sitem => {
                if (sitem.checked) {
                    num++
                }
            })
            if (num == item.children.length) {
                item.checked = true
            } else {
                item.checked = false
            }
            this.isAllChecked()
        },
        // 判断是否全选状态
        isAllChecked() {
            let num = 0
            this.province.forEach(item => {
                if (item.checked) {
                    num++
                }
            })
            if (this.province.length === num) {
                this.checked = true
            } else {
                this.checked = false
            }
        },
        // 获取列表
        getList() {
            const dataList = require('../../../static/BSNLAddress.json')
            const provinceData = dataList.filter((item) => item.parent === '0')
            provinceData.forEach(item => {
                this.province.map(sitem => {
                    sitem.children.map(ssitem => {
                        if (item.name.indexOf(ssitem.name) > -1) {
                            ssitem.value = item.value
                            ssitem.realname = item.name
                        }
                        return ssitem
                    })
                    return sitem
                })
            })

            // 数据初始化充值
            this.selected.forEach(item => {
                this.province.map(sitem => {
                    sitem.children.map(ssitem => {
                        if (ssitem.value === item.value) {
                            ssitem.checked = true
                        }
                        return ssitem
                    })
                    return sitem
                })
            })

            // 初始化不可选择项
            this.unChose.forEach(item => {
                this.province.map(sitem => {
                    sitem.children.map(ssitem => {
                      if (ssitem.value === item.value && !ssitem.checked) {
                          ssitem.choseForbidden = true
                      } else if (ssitem.value === item.value && ssitem.checked) {
                        ssitem.choseForbidden = false
                      }
                      return ssitem
                    })
                  return sitem
                })
            })

            this.province.map(sitem => {
                let num = 0
                let choseNum = 0
                sitem.children.forEach(ssitem => {
                    if (ssitem.checked) {
                        num++
                    }
                    if(ssitem.choseForbidden) {
                      choseNum++
                    }
                })
                if (num == sitem.children.length) {
                    sitem.checked = true
                }
                if (choseNum == sitem.children.length) {
                  sitem.choseForbidden = true
                }
                return sitem
            })

            this.isAllChecked()

            // this.listLoading = true;
            // this.request({
            //   url: '/bsnl-product/package/list',
            //   method: 'post',
            //   data: this.listQuery
            // }).then(({data, totalCount}) => {
            //   this.list = data;
            //   this.listTotal = totalCount;
            //   this.listLoading = false;
            // }).catch(err => {
            //   this.list = [];
            //   this.listTotal = 0;
            //   this.listLoading = false;
            // });
        },
        // 关闭弹窗
        close(){
            this.dialogVisible = false;
            document.body.removeChild(this.$el);
        },
        // 选完，点击确定
        choose(){
            let result = []
            this.province.forEach(item => {
                item.children.forEach(sitem => {
                    if (sitem.checked) {
                        result.push({
                            name: sitem.name,
                            realname: sitem.realname,
                            value: sitem.value
                        })
                    }
                })
            })
            if (result.length === 0) {
                return this.$message.error('请选择地区')
            }
            if (this.config.calcuType===3 && this.config.feeType===2) {
              let len = this.tableList.length
              if (Number(this.tableList[len - 1].intervalEnd) !== 99999) {
                this.$message.error('最后区间数必须为99999')
                return
              }
            }
            this.$emit('choose', {result: result, tableList:this.tableList})
            this.close()
        }
    }
  }
</script>

<style lang="scss" scoped>
.da {
  /deep/ .el-dialog {
    max-width: 900px!important;
  }
}
.checkall-box {
    padding: 0 20px 20px;
}
.check-box {
    position: relative;
}
.check-box .line {
    border-left: 1px solid #ccc;
    position: absolute;
    top: 0;
    left: 92px;
    bottom:0;
}
.check-wrapper {
    overflow: hidden;
    padding-top: 10px;
}
.check-item-all {
    padding: 0 20px;
    float: left;
}
.check-item-wrapper {
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.check-item-wrapper.nobor {
    border-bottom: none;
}
.checkbox-item {
    display: inline-block;
    margin: 0 10px;
}
</style>
